<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('资讯列表')" ></head>

<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        var data4Vue = {
            uri:'reports',
            beans: []
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list();

            },
            methods: {
                changestate:function(state,id){
                    var url = this.uri+"/"+id+"/"+state;
                    axios.post(url).then(function(response){
                        if(0!=response.data.length){
                            alert(response.data);
                        }
                        else{
                            vue.list(0);
                        }
                    });
                },
                list:function(){
                    var url =  this.uri;
                    axios.get(url).then(function(response) {
                        vue.beans = response.data;
                        console.log(response.data)
                    });
                },
                deleteBean: function (id) {
                    if(!checkDeleteLink())
                        return;
                    var url = this.uri+"/"+id;
                            axios.delete(url).then(function(response){
                                if(0!=response.data.length){
                                    alert(response.data);
                                }
                                else{
                                    vue.list(0);
                        }
                    });
                },
            }
        });
    });

</script>
<div id="workingArea" >
    <h1 class="label label-info" >报警单列表</h1>
    <br>
    <br>
    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="info">
                <th>ID</th>
                <th>报警标题</th>
                <th>报警人</th>
                <th>电话</th>
                <th>报警时间</th>
                <th>地址</th>
                <th>等级</th>
                <th>状态</th>
                <th>修改状态</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans ">
                <td>{{bean.id}}</td>
                <td><a :href="'admin_detail_report?id='+bean.conid " target="_blank">{{bean.describe}}</a></td>
                <td> {{bean.uname}}</td>
                <td> {{bean.tel}}</td>
                <td>{{bean.date}}</td>
                <td>{{bean.adress}}</td>
                <td>
                    <!--{{bean.level}}-->
                    <span v-if="bean.level === '1'" class="label label-info">建议</span>
                    <span v-if="bean.level === '2'" class="label label-warning">紧急</span>
                    <span  v-if="bean.level === '3'" class="label label-danger">危急</span>

                </td>
                <td >
                        <!--{{bean.state}}-->

                        <span v-if="bean.state === 0" class="label label-default">未解决</span>
                        <span v-if="bean.state === 1" class="label label-primary">正在解决</span>
                        <span v-if="bean.state === 2"  class="label label-success">已解决</span>

                </td>

                <td>
                    <div style="color: white;" class="btn-group btn-group-xs" role="group" aria-label="...">
                        <button style="color: white;" @click="changestate(0,bean.id)" type="button" class="  btn btn-default label-default">未解决</button>
                        <button style="color: white;" @click="changestate(1,bean.id)" type="button" class=" btn btn-default label-primary">解决中</button>
                        <button style="color: white;" @click="changestate(2,bean.id)" type="button" class="btn btn-default label-success">已解决</button>
                    </div>

                </td>
                <td>
                     <a href="#nowhere"  @click="deleteBean(bean.id)"><span class="   glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
